<template>
  <div id="tip">
    <article>
      <img :src="icons[$route.params.type]" alt="">
      <p>{{ currentStatus.text }}</p>
      <p>{{ currentStatus.subText }}</p>
    </article>

    <div class="buttons">
      <a
        href="#"
        v-for="(item, index) in currentStatus.buttons"
        :key="index"
        @click="click(item.method, $event)">{{ item.text }}</a>
    </div>
  </div>
</template>

<script>
  import { Indicator, Toast } from 'mint-ui';
  export default {
    name: "tip",
    data() {
      return {
        currentStatus: {
          text: '',
          subText: '',
          buttons: [

          ]
        },
        status: {

          // 注册信息登记

          '0': {
            text: '信息登记成功 ！！',
            subText: '请待后台进行资料审核。',
            buttons: [
              {
                text: '完成',
                method: 'backToLogin'
              }
            ]
          },

          // 人工核保

          '1': {
            text: '信息提交成功 ！！',
            subText: '待保险公司进行核对，请稍后。',
            buttons: [
              {
                text: '状态刷新',
                method: 'policyConfirm'
              },
              {
                text: '个人中心',
                method: 'goToMine'
              }
            ]
          },

          // 核保失败

          '2': {
            text: '核保失败！！',
            subText: sessionStorage.getItem('failureReason'),
            buttons: [
              {
                text: '个人中心',
                method: 'goToMine'
              }
            ]
          }
        },
        icons: [
          require('../../assets/images/public/tick.png'),
          require('../../assets/images/public/tick.png'),
          require('../../assets/images/public/wrong.png')
        ]
      }
    },
    methods: {
      click(method, e) {
        e.preventDefault();
        if (method === 'backToLogin') {
          this.$router.push('/login');
        } else if (method === 'policyConfirm') {
          Indicator.open({
            text: '核保咨询中...',
            spinnerType: 'snake'
          });
          this.$http.post({
            api: this.$api.INSURANCE_POLICY_CONFIRM_AGAIN,
            params:  {
              order_id: this.$route.query.order_id,
              company_id: this.$route.query.company_id
            },
            success: (res) => {
              Indicator.close();
              this.$router.push({
                name: 'PayInsuranceFinal',
                params: {
                  company_id: this.$route.query.company_id,
                  order_id: this.$route.query.order_id,
                  order_pay_id: res.data.msg.qrcode.order_pay_id
                },
                query: {
                  num: res.data.msg.people.plate_num,
                  price: res.data.msg.price,
                  code: res.data.msg.qrcode.url
                }
              })
            },
            failure: (res) => {
              Indicator.close();

              if (res.data.error_msg) {

                // 报错

                this.enterFailPage(res.data.error_msg);

              } else if (res.data.status === 'modify') {

                // 待处理

                Toast('此订单已被移至待处理订单');

                this.$http.post({
                  api: this.$api.INSURANCE_ORDER_UPDATE,
                  params: {
                    user_id: localStorage.getItem('id'),
                    order_id: this.$route.query.order_id
                  },
                  success: (res) => {

                    // 待处理订单页

                    this.$router.push('/mine/mine-orders?type=pending');
                  }
                })

              } else {

                Toast('人工核保中');
              }
            },
            error: () => {
              Indicator.close();
              Toast('网络错误');
            }
          });
        } else if (method === 'goToMine') {
          this.$router.push('/mine');
        }
      },

      // 核保失败页面

      enterFailPage(msg) {

        // sessionStorage 保存核保失败原因

        sessionStorage.setItem('failureReason', msg);

        this.$router.push('/tip/2');
      }
    },
    created() {
      this.currentStatus = this.status[this.$route.params.type];
    },
    watch: {
      '$route.params.type': function (newVal) {
        this.currentStatus = this.status[newVal];
      }
    }
  }
</script>

<style scoped lang="scss">

  #tip {
    >article {
      padding: 2.5rem 2rem 2.4rem;
      background: $white;
      box-shadow: $public-box-shadow;

      >img {
        $icon-side: 5.5rem;
        width: $icon-side;
        height: $icon-side;
        margin: $margin-auto 1.2rem;
      }

      >p {
        text-align: center;

        &:nth-of-type(1) {
          font-size: 1.8rem;
          color: #0196ff;
        }

        &:nth-of-type(2) {
          margin-top: 1rem;
          font-size: 1.5rem;
          color: #333;
        }
      }
    }

    >.buttons {
      display: flex;
      justify-content: space-around;
      margin-top: 2.5rem;

      >a {
        width: 12rem;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        font-size: 1.8rem;
        color: #333;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: $white;
      }
    }
  }
</style>
